<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>供应商列表</title>
    <link rel="stylesheet" href="/css/index.css" type="text/css">
    <script src="/js/vue.js"></script>
    <script src="/js/vue-router.js"></script>
    <script src="/js/axios.min.js"></script>
    <script src="/js/qs.min.js"></script>
    <script src="/js/index.js"></script>

    <style>
        .el-dropdown-link {
            cursor: pointer;
            color: #409EFF;
        }
        .el-icon-arrow-down {
            font-size: 12px;
        }
        a{
            text-decoration: none;
            color: #666666;
        }
    </style>
</head>
<body>
<div id="app">
    <el-dialog title="供销商信息" :visible.sync="dialogFormVisible" @close="closeDialog">
        <el-form :model="company">
            <el-form-item label="供销商公司名称">
                <el-input v-model="supplier.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="供销商地区">
                <el-input v-model="supplier.address" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="供销商经营范围">
                <el-input v-model="supplier.business" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="供销商联系人">
                <el-input v-model="supplier.linkman" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="供销商联系电话">
                <el-input v-model="supplier.telephone" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="saveSupplier">确 定</el-button>
        </div>
    </el-dialog>
  <div rel="value">
      <span>选择地区：</span>
      <template>
          <el-select v-model="value.pro"  placeholder="请选择" @change="selectCity">
                  <el-option
                          v-for="(pro,index) in provinces"
                          :key="index"
                          :label="pro"
                          :value="pro">
                  </el-option>
          </el-select>

          <el-select v-model="value.city" style="margin-left: 20px;" placeholder="请选择市" @change="selectArea">
              <el-option
                      v-for="(city,index) in typeCitys"
                      :key="index"
                      :label="city"
                      :value="city">
              </el-option>
          </el-select>

          <el-select v-model="value.area" style="margin-left: 20px;" placeholder="请选择市">
              <el-option
                      v-for="(area,index) in typeAreas"
                      :key="index"
                      :label="area"
                      :value="area">
              </el-option>
          </el-select>
      </template>
      <span>企业名称</span>
      <el-input v-model="input" placeholder="请输入内容" style="width: 100px"></el-input>
      <el-button type="primary" icon="el-icon-search" @click="submitSupp">搜索</el-button>
  </div>
<!--    表格-->
    <el-table
            ref="companyTable"
            @current-change="toggleSelection"
            :data="suppliers"
            style="width: 100%">
        <el-table-column
                type="selection"
                width="55">
        </el-table-column>
        <el-table-column
                label="公司编号">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.id }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="公司名称">
            <template slot-scope="scope">
                <span style="margin-left: 10px;cursor: pointer" @click="suppInfo(scope.$index, scope.row)">{{ scope.row.name }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="公司负责人">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.linkman }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="公司电话">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.telephone }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="公司地址">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.address }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="公司邮箱">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.email }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="公司经营范围">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.business }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="公司备注">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.companyIntroduction }}</span>
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        type="danger"
                        @click="loadComPro">订购
                </el-button>
            </template>
        </el-table-column>
    </el-table>
<!--    分页-->
    <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :page-size="size"
            :current-page="current"
            @current-change="loadSupplier">
    </el-pagination>
</div>
    <script>
        new Vue({
            el:"#app",
            data(){
                return{
                    suppliers:[],///分页供应商数据
                    supplier:[],
                    total:0,//总数据
                    current:0,//当前页
                    size:10,//每页数据条数
                    dialogFormVisible:false,
                    provinces:["湖北省","湖南省","广东省","河南省","河北省","陕西省","广西省"],//省
                    city:{
                        "湖北省":["武汉市","襄阳市","宜昌市","荆州市","恩施市"],
                        "湖南省":["长沙市","株洲市","湘潭市","衡阳市","邵阳市"],
                        "广东省":["广东市","深圳市","珠海市","中山市","佛山市"],
                        "河南省":["郑州市","开封市","洛阳市","南阳市","许昌市"],
                        "陕西省":["西安市","铜川市","宝鸡市","咸阳市","汉中市"],
                        "广西省":["南宁市","柳州市","桂林市","北海市","梧州市"]
                        },//市
                    area:{
                        "武汉市":["洪山区","东湖区","花山区","青山区"],
                        "长沙市":["长沙县","善华县","湘潭县","湘阴县"],
                        "襄阳市":["襄城区","樊城区","襄州区","保康县"],
                        "株洲市":["茶陵县","炎陵县","芦淞县"],
                        "广东市":["黄埔区","花都区","天河区"],
                        "郑州市":["中原区","二七区","上街区"],
                        "西安市":["莲湖区","雁塔区","未央区"],
                        "南宁市":["江南区","青秀区","兴宁区"]
                    },//区
                    typeCitys:[],//选择的省下的市
                    typeAreas:[],//选择的市下的县
                    value:{
                        pro:'',
                        city:'',
                        area:''
                    },
                    input:'',
                }
            },
            methods:{
                //加载供销商分页信息
                loadSupplier(current){
                    let size=this.size
                    axios.get("/suppliers/"+current+"/"+size).then(res=>{
                        this.suppliers=res.data.records;
                        this.total = res.data.total;
                        this.current = res.data.current;
                    })
                },
                //二级菜单
                selectCity(){
                    this.value.city='';
                    for( const k in this.provinces){
                        if(this.value.pro===this.provinces[k]){
                            this.typeCitys=this.city[this.value.pro]
                        }
                    }
                },
                //三级菜单
                selectArea(){
                    this.value.area='';
                    for(const k in this.typeCitys){
                        if(this.value.city===this.typeCitys[k]){
                            this.typeAreas=this.area[this.value.city];
                        }
                    }
                },
                //显示选择供销商信息
                handleEdit(index, row) {
                    this.supplier = JSON.parse(JSON.stringify(row));
                    this.dialogFormVisible=true;
                },
                //修改
                saveSupplier(){
                    let supp=JSON.parse(JSON.stringify(this.supplier));
                    axios.put("/supplier",supp).then(res=>{
                        if(res.data=="ok"){
                            this.dialogFormVisible=false;
                            this.$message("修改成功！")
                        }
                    })
                },
                submitSupp(){
                    let add =this.value.pro+this.value.city+this.value.area
                    let name =this.input
                    if(add==''){
                        this.$message("地址不能为空！")
                    }
                    if(name==''){
                        this.$message("公司名称不能为空！")
                    }
                    axios("/suppliers/1/10/"+add+"/"+name).then(res=>{
                        this.suppliers = res.data.records;
                        this.total = res.data.total;
                        this.current = res.data.current;
                    })
                },
                suppInfo(index,row){
                    location.href="/findComIfo/"+row.name
                },
                loadComPro(){
                    location.href="../company/list.html"
                }
            },
            mounted(){
                this.loadSupplier(1);
                this.selectCity();
                this.selectArea();
            }
        })
    </script>
</body>
</html>